<template>
	<view class="is-join-wrapper">
		<view class="is-join">
			<image class="img" src="../../../static/logo.png" mode="" mode="aspectFit"></image>
			<view class="title">是否参加“产业对接会”？</view>
			<view class="content">参加产业对接会则将开启建联通道，您的名片将展示给他人，并可查看其他参会者的名片。</view>
			<div class="btns">
				<div class="btn" @click="close">暂不参加</div>
				<div class="btn on">立即参加</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.is-join-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,0.6);
		backdrop-filter: blur(4px);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.is-join {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 14px;
			padding-bottom: 20px;
			position: relative;
			
			.img {
				position: absolute;
				left: 50%;
				top: -30px;
				transform: translateX(-50%);
				width: 80px;
				height: 80px;
				border-radius: 50%;
				border: 3px solid #fff;
				box-sizing: border-box;
				background-color: #fff;
			}
			
			.title {
				padding-top: 70px;
				font-family: AlibabaPuHuiTi_3_75_SemiBold;
				font-size: 22px;
				color: #000000;
				line-height: 24px;
				text-align: center;
				font-style: normal;
			}
			
			.content {
				padding: 10px 20px 0;
				margin-bottom: 42px;
				width: 295px;
				height: 40px;
				font-family: AlibabaPuHuiTi_3_45_Light;
				font-size: 13px;
				color: #000000;
				line-height: 20px;
				text-align: center;
				font-style: normal;
			}
			
			.btns {
				display: flex;
				justify-content: space-between;
				padding: 0 20px;
				
				.btn {
					width: 240rpx;
					height: 44px;
					background: rgba(30,35,75,0.1);
					border-radius: 22px;
					font-family: AlibabaPuHuiTi_2_65_Medium;
					font-size: 16px;
					color: #1E234B;
					line-height: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-style: normal;
					
					&.on {
						width: 334rpx;
						background: #7350F5;
						color: #fff;
					}
				}
			}
		}
	}
</style>